<style scoped>
    .w254{width:254px;}
    .add_bank_card_page {
        width: 800px;
        height: 30px;
        margin: 10px auto;
    }
    .add_bank_card_form {
        width: 625px;
        margin: 20px auto;
    }
    .text_blue {
        cursor: pointer;
        color: rgb(59, 166, 211);
    }
</style>
<template>
    <div>
        <nt-row class="title_main">
            <nt-col :span="12">添加银行卡<img src="../../images/default_img.jpg" width="20" height="20" /></nt-col>
            <nt-col :span="12" align="right"><span class="text_blue" @click="goBack"><i class="nt-icon-xbn-20 mR5"></i>返回</span></nt-col>
        </nt-row>
        <nt-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="add_bank_card_form">
            <nt-form-item label="银行卡货币种类：" prop="currency" >
                <nt-select v-model="ruleForm.currency" placeholder="请选择" class="w370">
                    <nt-option v-for="item in currencyTypeList" :key="item.curTypeId" :label="item.curType" :value="item.curTypeId">
                    </nt-option>
                </nt-select>
                <p class="col_cccccc lh21">大陆公司和个人暂时只能接收人民币提现。</p>
            </nt-form-item>
            <nt-form-item label="帐户名：" prop="account_holder_name">
                <nt-select v-model="ruleForm.account_holder_name" placeholder="请选择" class="w370" @change="changeAccount">
                    <nt-option v-for="item in accountList" :label="item.legal_entity_name" :value="item.legal_entity_id_number">
                    </nt-option>
                </nt-select>
                <p class="col_cccccc lh21">根据监管要求，您提现的账户的受益人/公司需要进行实名备案，列表中只显示已经备案的受益人/公司信息。如果您需要添加新的受益人/公司，请点击&nbsp;&nbsp;
                    <a href="javascript:;" class="text_blue" @click="toVerified">实名认证</a>
                </p>
            </nt-form-item>
            <nt-form-item label="银行卡号：" prop="bank_number">
                <nt-input v-model="ruleForm.bank_number" placeholder="请输入银行卡号" :maxlength="40" class="w370"/>
            </nt-form-item>
            <nt-form-item label="发卡银行：" prop="bank_name">
                <nt-input v-model="ruleForm.bank_name" placeholder="请输入发卡银行" :maxlength="40" class="w370"/>
            </nt-form-item>
            <nt-form-item label="分行信息：" prop="bank_branch_name">
                <nt-input v-model="ruleForm.bank_branch_name" placeholder="请输入分行信息" :maxlength="40" class="w370"/>
            </nt-form-item>
            <nt-form-item label="Swift Code：" prop="bic_number">
                <nt-input v-model="ruleForm.bic_number" placeholder="请输入Swift Code" :maxlength="40" class="w370"/>
            </nt-form-item>
            <nt-form :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="147px" class="add_bank_card_form">
                <nt-form-item label="验证码：" prop="verification_code">
                    <nt-input v-model="ruleForm.verification_code" placeholder="请输入验证码" :maxlength="40" class="w254"/>
                </nt-form-item>
                <nt-form-item>
                    <nt-button type="success" :loading="loading" :disable="disable" @click="sendVerification()">获取验证码</nt-button>
                </nt-form-item>
            </nt-form>
            <nt-form-item label="">
                <nt-button class="add_bank_card_next w240" type="success" :loading="loading" :disable="disable" @click="submitForm()">{{submit_text}}
                </nt-button>
            </nt-form-item>
        </nt-form>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                ruleForm: {
                    currency: '',
                    account_holder_name: '',
                    bank_number: '',
                    bank_name: '',
                    bank_branch_name: '',
                    bic_number: '',
                    verification_code: '',
                },
                legal_entity_id_number: '',
                rules: {
                    currency: [
                        { required: true, message: '请选择银行卡货币种类', trigger: 'change' }
                    ],
                    account_holder_name: [
                        { required: true, message: '请选择帐户名' }
                    ],
                    bank_number: [
                        { required: true, message: '请输入银行卡号', trigger: 'blur' },
                    ],
                    bank_name: [
                        { required: true, message: '请输入发卡银行', trigger: 'blur' },
                    ],
                    bank_branch_name: [
                        { required: true, message: '请输入分行信息', trigger: 'blur' },
                    ],
                    bic_number: [
                        { required: true, message: '请输入Swift Code', trigger: 'blur' },
                    ],
                    verification_code: [
                        { required: true, message: '请输入验证码', trigger: 'blur' },
                    ],
                },
                currencyTypeList: [{ curTypeId: 'CNY', curType: '人民币' }, { curTypeId: 'USD', curType: '美元' }, { curTypeId: 'EUR', curType: '欧元' }, { curTypeId: 'JPY', curType: '日元' }],
                accountList: [],
                loading: false,
                disable: false,
                submit_text: '下一步',
            }
        },

        mounted: function () {
            this.requestGetLegalEntities();
        },

        methods: {
            toVerified() {
                this.$router.push('/main/verified');
            },
            goBack() {
                this.$router.go(-1);
            },
            changeAccount(val) {
                this.legal_entity_id_number = val;
            },
            submitForm() {
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        this.verificationCode();
                    } else {
                        return false;
                    }
                });
            },
            async requestGetLegalEntities() {
                let params = {};
                params.accountId = this.ctx.store.get('account_id');
                let accountListData = await this.ctx.models.settlement.getLegalEntities(params, this.ctx);
                if (accountListData.statusCode == 200) {
                    this.accountList = accountListData.data;
                }
            },
            // 
            async sendVerification() {
                let statusData = await this.ctx.models.settlement.sendVerification(this.ctx);
                if (statusData.statusCode == 200) {
                    this.$alert(statusData.message, '提示', {
                        confirmButtonText: '确定'
                    });
                }
            },
            async verificationCode() {
                let params = this.ruleForm.verification_code;
                let statusData = await this.ctx.models.settlement.verificationCode(params, this.ctx);
                if (statusData.statusCode == 200) {
                    this.applyBankAccount();
                }
            },
            async applyBankAccount() {
                let params = {};
                params.accountId = this.ctx.store.get('account_id');
                params.param = { 'account_holder_name': this.ruleForm.account_holder_name, 'bank_branch_name': this.ruleForm.bank_branch_name, 'account_number': this.ruleForm.bank_number, 'bank_name': this.ruleForm.bank_name, 'bic_number': this.ruleForm.bic_number, 'currency': this.ruleForm.currency, 'id': this.legal_entity_id_number, 'region': 'CN' };
                let statusData = await this.ctx.models.settlement.applyBankAccount(params, this.ctx);
                if (statusData.statusCode == 200) {
                    this.$alert(statusData.message, '提示', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.goBack()
                        }
                    });
                }
            },
        }
    }
</script>